<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="animate.css">   
        <title>使用 animate.css 制作流畅交互动效</title>
        <style type="text/css">
            html {
                font-size: 62.5%;
                font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            }
            body {
                font-size: 1.8em;
                line-height: 3;
                background-color: #eeeeee;
            }
            h3 {
                font-size: 1.8em;
                margin-bottom: 3rem;
                line-height: 1.5;
                font-weight: 800;
            }
            p {
                margin-bottom: 1.5rem;
            }
            .site-container {
                max-width: 320px;
                margin: 10px auto;
                padding-left: 0.6em;
                padding-right: 0.6em;
                padding-top: 3%;
                padding-bottom: 3%;
            }
            @media screen and (min-width: 60.063em) {
                .site-container {
                    max-width: 400px;
                }
            }
            .card {
                position: relative;
                overflow: hidden;
                background-color: white;
                box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24), 0 1px 18px 0 rgba(0,0,0,0.12);
                border-radius: 2px;
                padding: 1em 1.5em;
            }
            .form__wrapper {
                overflow: hidden;
                position: relative;
                z-index: 1;
                display: inline-block;
                margin-bottom: 1.6rem;
                width: 100%;
                vertical-align: top;
            }
            .form__wrapper__submit {
                padding: 1.6rem 0;
            }
            .form__input {
                display: block;
                position: relative;
                margin-top: 1em;
                padding: 0.84em 0;
                width: 100%;
                box-sizing: border-box;
                color: #444;
                font-size: 1.6rem;
                outline: 0;
                border: none;
                border-bottom: solid 1px #ddd;
            }
            .form__input:focus {
                background-position: 0 0;
                color: #444;
            }
            .form__label {
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 0;
                width: 100%;
                height: calc(99%);
                text-align: left;
                pointer-events: none;
                color: #999;
            }
            .form__label__content {
                position: absolute;
                transition: font-size 0.5s;
            }
            .btn {
                width: 100%;
                display: inline-block;
                padding: 0.7em 1.5em;
                border-radius: 2px;
                background-color: #2196f3;
                color: #fff;
                border: 0;
                outline: none;
                cursor: pointer;
                font-family: inherit;
                font-weight: 400;
                font-size: 1.6rem;
                box-shadow: 0 1px 3px 0 rgba(3,30,51,0.24), 0 1px 2px 0 rgba(3,30,51,0.12);
                transition: all 0.2s ease;
                animation-iteration-count: 3;
                animation-duration: 1s;
            }
            .btn:focus,
            .btn:hover {
                background-color: #0d8aee;
            }
            .underline {
                position: absolute;
                top: 27px;
                width: 0;
                height: 2px;
                background-color: blue;
            }
            .form__input:focus ~ .underline {
                width: 100%;
            }
            @keyframes linemove {
                0%{width: 100%}
                100%{width: 0}
            }
        </style>
    </head>
    <body>
    
        <section class="site-container">
            <section class="card">
                <h3>Login</h3>
                <form>
                    <div class="form__wrapper" data-wow-delay="0.5s">
                        <input type="email" class="form__input" id="email" name="email">
                        <label class="form__label" for="email">
                        <span class="form__label__content">Email</span>
                        </label>
                        <h3 class="underline"></h3>
                    </div>
                    <div class="form__wrapper" data-wow-delay="0.6s">
                        <input type="password" class="form__input" id="password" name="password">
                        <label class="form__label" for="password">
                        <span class="form__label__content">Password</span>
                        </label>
                        <h3 class="underline"></h3>
                    </div>
                    <div class="form__wrapper__submit pulse infinite" data-wow-delay="0.7s">
                        <div class="form__input__submit">
                            <button type="submit" name="submit" class="btn">Submit</button>
                        </div>
                    </div>
                </form>
            </section>
        </section>
    <script src="jquery.min.js"></script>
    <script>
        $("#email").focus(function(){
            $(".underline:first").css("animation","");
            $(".form__label__content:first").css("font-size","14px");
        });
        $("#email").blur(function(){
            $(".underline:first").css("animation","linemove 0.4s");
            if(this.value == "")
                $(".form__label__content:first").css("font-size","24px");
            ani();
        });
        $("#password").focus(function(){
            $(".underline:last").css("animation","");
            $(".form__label__content:last").css("font-size","14px");
        });
        $("#password").blur(function(){
            $(".underline:last").css("animation","linemove 0.4s");
            if(this.value == "")
                $(".form__label__content:last").css("font-size","24px");
            ani();
        });
        function ani(){
            if($("#email").val()!=="" && $("#password").val()!=="")
            $(".btn").addClass("animated pulse");
            setTimeout(function(){$(".btn").removeClass("pulse")},3000);
        }
    </script>
</body></html>